<template>
  <div class="h-100 w-100 sczcohyj">
    <div class="left_panel">
      <div class="text-panel" style="height:calc(33%)">
        <el-row>
          <el-col :span=12>
            <div class="panel-title">
              <div class="text">
                <b></b>煤炭市场及政策动态 <i></i>
              </div>
            </div>
          </el-col>
          <el-col :span=12>
            <div :class="table1.active==3?'buttonDiv  active':'buttonDiv'" @click="changetable(3)">关停信息</div>
            <div  :class="table1.active==2?'buttonDiv  active':'buttonDiv'" @click="changetable(2)">国内</div>
            <div :class="table1.active==1?'buttonDiv  active':'buttonDiv'" @click="changetable(1)">国际</div>
          </el-col>
        </el-row>
        <div class="panel-content"  >
          <el-table
              class="mapTable"
              :data="table1.data"
              :row-class-name="tableRowClassName"
              style="width: 100%">
            <el-table-column prop="message" min-width="200" label="消息内容">
            </el-table-column>
            <el-table-column prop="region" min-width="80" label="受影响区域">
            </el-table-column>
            <el-table-column prop="time" min-width="80" label="时间">
            </el-table-column>
          </el-table>
        </div>
      </div>
       <div class="text-panel" style="height:calc(33%)">
        <el-row>
          <el-col :span=12>
            <div class="panel-title">
              <div class="text">
                <b></b>国内煤炭价格变化动态 <i></i>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <el-select v-model="mtjg.type" style="margin-left:2.6vw;width:140px;height:40px"   placeholder="" @change="slcChange" class="corf">
                <el-option
                    v-for="item in mtjgData"
                    :key="item.type"
                    :label="item.name"
                    :value="item.type">
                </el-option>
          </el-select>
          </el-col>
        </el-row>
        <div class="panel-content full-h"  >
          <vae-echarts height="calc(100% )"   style="height: calc(100%)"    :options="province_name"    > </vae-echarts>
        </div>
      </div>
      <div class="text-panel" style="height:calc(33%)">
        <el-row>
          <el-col :span=12>
            <div class="panel-title">
              <div class="text">
                <b></b> 国内能源结构变化动态<i></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="panel-content full-h"  >
          <vae-echarts height="calc(100% )"   style="height: calc(100%)"    :options="province_name1"    > </vae-echarts>
        </div>
      </div>
    </div>
    <div class="mid_panel">
    </div>
    <div class="right_panel">
      <div class="text-panel" style="height:calc(50%)" >
        <el-row>
          <el-col :span=24>
            <div class="panel-title">
              <div class="text">
                <b></b>{{activeRow.name}}煤矿安全整体态势曲线<i></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="panel-content  "  style="height: calc(100% - 2vh)" >
          <vae-echarts height="calc(100% )"   style="height: calc(100%)"    :options="province_name2"    > </vae-echarts>
        </div>
      </div>
      <div style="height:calc(50%);" >
        <el-row class="full-h">
          <el-col :span="13" class="full-h ">
            <div class="echart-panel">
              <div class="panel-title"><b></b>{{activeRow.name}}影响因素<i></i></div>
              <div class="panel-content full-h">
                <vae-echarts height="calc(100% )"   style="height: calc(100%)"    :options="radarOption"    > </vae-echarts>
              </div>
            </div>
          </el-col>
          <el-col :span="11" class="full-h">
            <div class="echart-panel">
              <div class="panel-title"><b></b>{{activeRow.name}}监管对策建议<i></i></div>
              <div class="panel-content ">
                  <div class="listPanel">
                      <div class="listRow" v-for="(item,index) in listData" :key=index>
                          {{item.name}}
                      </div>
                  </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
const pageName = "views_tsjc";

export default {
  name: pageName,
    props:{
    vm:null
  },
  data() {
    return {
      table1:{
        active:1,
        data:[]
      },
      mtjg:{
        type:'1'
      },
      mtjgData:[{name:"秦皇岛",type:'1'},{name:"曹妃甸港",type:'2'},
      {name:"防城港",type:'3'},{name:"广州港",type:'4'},{name:"京唐港",type:'5'},
      {name:"宁波港",type:'6'},{name:"秦皇岛港",type:'7'},{name:"天津港",type:'8'},
      ],
      guoji:[
        {
         message:"中澳关系变化，煤炭进口减少",
         region:"澳大利亚",
         time:"2021-5-01"
        },
        {
         message:"国际动力煤市场整体高位运行，各主要煤炭出口国离岸价格同比和月环比均明显上涨。",
         region:"全国",
         time:"2021-5-31"
        }
      ],
      guonei:[
        {
         message:"钢铁等原材料价格上涨，焦煤需求旺盛",
         region:"全国",
         time:"2021-5-13"
        },
        {
         message:"汛期水电站防洪，水电发电量减少",
         region:"全国",
         time:"2021-5-21"
        },
        {
         message:"气温过高，居民用电量大增",
         region:"全国",
         time:"2021-5-23"
        },
        {
         message:"台山核电站0级运行事件",
         region:"全国",
         time:"2021-5-26"
        }
      ],
      stopdata:[{
         message:"山西因两起事故，停产部分煤矿",
         region:"山西",
         time:"2021-5-22"
        },
        {
         message:"湖北所有煤矿停产检修",
         region:"湖北",
         time:"2021-5-21"
        },
        {
         message:"河南大量煤矿停产检修，河南大量煤矿停产检修",
         region:"河南",
         time:"2021-5-24"
        },
        {
         message:"重庆关停所有煤矿",
         region:"重庆",
         time:"2021-5-29"
        }],
      rightPie1:{ },
      province_name1:{},
      province_name:{},
      province_name2:{},
      radarOption:{},
      listData:[],
      line2Data:{
        name:["山西省","内蒙古","陕西","吉林","全国总体"],
        data:{
          "山西省":[0, 0, 3, 1, 1, 2, 0,],
          "内蒙古":[1,2,3,3,4,0,0],
          "陕西":[1,1,0,0,1,0,0],
          "吉林":[0,2,1,0,0,0,0],
          "全国总体":[2,5,7,4,6,2,1],
        },
        color:{
           "山西省":"#00f8ff",
          "内蒙古":"#00f15a",
          "陕西":"#0696f9",
          "吉林":"#dcf776",
          "全国总体":"#6c50f3",
        }
      },
      rightBottomData:[
        {
          id:"1",
          "name":"山西省",
          "gj":"18",
          "gn":"10",
          "gt":"15",
          "ny":"10",
          "zc":"5",
          "jy":"汲取近期全国和本省发生的事故教训，切实抓好瓦斯、水、顶板等重大灾害防治工作。"
        },
        {
           id:"2",
          "name":"内蒙古",
          "gj":"10",
          "gn":"8",
          "gt":"10",
          "ny":"8",
          "zc":"5",
          "jy":"7月下旬严格复工复产条件核查"
        },
        {
          id:"3",
          "name":"陕西",
          "gj":"10",
          "gn":"6",
          "gt":"10",
          "ny":"6",
          "zc":"5",
          "jy":"针对复产复工高峰、煤价高位运行等特点，加大监察执法力度，严厉打击违法违规行为"
        },
        {
           id:"4",
          "name":"吉林",
          "gj":"8",
          "gn":"4",
          "gt":"2",
          "ny":"4",
          "zc":"5",
          "jy":"7月下旬严格复工复产条件核查"
        },
        {
           id:"5",
          "name":"全国整体",
          "gj":"11.5",
          "gn":"7",
          "gt":"9.25",
          "ny":"7",
          "zc":"5",
          "jy":"7月下旬严格复工复产条件核查"
        }
      ],
      activeId:"5",
      activeRow:{
        name:"全国整体"
      }
    }
  },
  methods:{
    slcChange(type){
      this.initData(type)
    },
    initData(type) {
      console.log(234,type)
      this.request({
        url: `data/getData/4.${type}`,
        method: "get"
      }).then(data => {
        if(type == '4'){
          this.initLine_4(data.data)
        }else if(type == '7'){
          this.initLine_7(data.data)
        }else{
          this.initLine(data.data)
        }
      });
    },
    changetable(val){
      this.table1.active=val;
      if(val == 1){
        this.table1.data =[...this.guoji];
      }else if(val == 2){
        this.table1.data = this.guonei;
      }else{
        this.table1.data = this.stopdata;
      }
      console.log(  this.table1)
    },
    tableRowClassName({row, rowIndex}){
      if (rowIndex% 2==0) {
        return 'tableBg';
      } else {
        return '';
      }
    },
    initLine(data){
      this.province_name = {
        tooltip: {
          trigger: 'axis',
          // formatter: '{b}{d}',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0,
              fontSize:20
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
            fontSize:16
          },
        },
        // legend: {
        //   show: true,
        //   right: '10%',
        //   top: '5%',
        //   itemGap: 20,
        //   itemWidth:15,
        //   itemHeight:10,
        //   textStyle:{
        //     color:"#fff",
        //     fontSize:12
        //   },
        //   // data:data.typeList,
        // },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {
            rotate: 30,
            interval:3,
            color: 'rgb(0,253,255,0.6)'
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: data.dateList.reverse(),

        }],
        yAxis: [{
          type: 'value',
          min: 0,
          name:'元/吨',
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            // formatter: '{value}元/吨',
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisTick: {
            show: true,
          },
        }],
        series: [
            {
              name: data.typeList[0],
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
              lineStyle: {
                normal: {
                  color: "#6c50f3",
                  // shadowColor: 'rgba(0, 0, 0, .3)',
                  // shadowBlur: 0,
                  // shadowOffsetY: 5,
                  // shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#6c50f3',
              }
          },
          // itemStyle: {
          //   color: "#6c50f3",
          //   borderColor: "#fff",
          //   borderWidth: 3,
          //   shadowColor: 'rgba(0, 0, 0, .3)',
          //   shadowBlur: 0,
          //   shadowOffsetY: 2,
          //   shadowOffsetX: 2,
          // },
          // areaStyle: {
          //   normal: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //       offset: 0,
          //       color: 'rgba(108,80,243,0.3)'
          //     },
          //       {
          //         offset: 1,
          //         color: 'rgba(108,80,243,0)'
          //       }
          //     ], false),
          //     // shadowColor: 'rgba(108,80,243, 0.9)',
          //     // shadowBlur: 20
          //   }
          // },
          data: data.valListOne.reverse()
        },
          {
            name: data.typeList[1],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: "red",
                // shadowColor: 'rgba(0, 0, 0, .3)',
                // shadowBlur: 0,
                // shadowOffsetY: 5,
                // shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#00ca95',
              }
            },
            // itemStyle: {
            //   color: "#00ca95",
            //   borderColor: "#fff",
            //   borderWidth: 3,
            //   shadowColor: 'rgba(0, 0, 0, .3)',
            //   shadowBlur: 0,
            //   shadowOffsetY: 2,
            //   shadowOffsetX: 2,
            // },
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(0,202,149,0.3)'
            //     },
            //       {
            //         offset: 1,
            //         color: 'rgba(0,202,149,0)'
            //       }
            //     ], false),
            //     // shadowColor: 'rgba(0,202,149, 0.9)',
            //     // shadowBlur: 20
            //   }
            // },
            data: data.valListTwo.reverse()
          },
           {
            name: data.typeList[2],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: "green",
                // shadowColor: 'rgba(0, 0, 0, .3)',
                // shadowBlur: 0,
                // shadowOffsetY: 5,
                // shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgb(231,255,0)',
              }
            },
            // itemStyle: {
            //   color:'red',
            //   borderColor: "#fff",
            //   borderWidth: 3,
            //   shadowColor: 'rgba(0, 0, 0, .3)',
            //   shadowBlur: 0,
            //   shadowOffsetY: 2,
            //   shadowOffsetX: 2,
            // },
            // areaStyle: {
            //   normal: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //       offset: 0,
            //       color: 'rgba(0,202,149,0.3)'
            //     },
            //       {
            //         offset: 1,
            //         color: 'rgba(0,202,149,0)'
            //       }
            //     ], false),
            //     // shadowColor: 'rgb(231,255,0)',
            //     // shadowBlur: 20
            //   }
            // },
            data: data.valListThree.reverse(),
          },
        ]
      };
    },
    initLine_7(data){
      this.province_name = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0,
              fontSize:20
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
            fontSize:16
          },
        },
       
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {
            rotate: 30,
            interval:4,
            color: 'rgb(0,253,255,0.6)'
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: data.dateList.reverse(),

        }],
        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          name:'元/吨',
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            // formatter: '{value}元/吨',
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisTick: {
            show: true,
          },
        }],
        series: [
          {
              name: data.typeList[0],
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
              lineStyle: {
                normal: {
                  color: "#6c50f3",
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#6c50f3',
              }
          },
          itemStyle: {
            color: "#6c50f3",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(108,80,243,0.3)'
              },
                {
                  offset: 1,
                  color: 'rgba(108,80,243,0)'
                }
              ], false),
              shadowColor: 'rgba(108,80,243, 0.9)',
              shadowBlur: 20
            }
          },
          data: data.valListOne.reverse()
          },
        ]
      };
    },
    initLine_4(data){
      this.province_name = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0,
              fontSize:20
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
            fontSize:16
          },
        },
        // legend: {
        //   // show: true,
        //   right: '10%',
        //   top: '10%',
        //   itemGap: 20,
        //   itemWidth:15,
        //   itemHeight:10,
        //   textStyle:{
        //     color:"#fff",
        //     fontSize:10
        //   },
        //   // data:data.typeList,
        // },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          // containLabel: true
        },
        // color:['red','blue','green','#29c436','#206efb',''],
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {
            rotate: 30,
            interval:4,
            color: 'rgb(0,253,255,0.6)'
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: data.dateList.reverse(),

        }],
        yAxis: [{
          type: 'value',
          min: 0,
          name:'元/吨',
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            // formatter: "{value}元/吨",
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisTick: {
            show: true,
          },
        }],
        series: [
            {
              name: data.typeList[0],
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
            //   label: {
            //     show: true,
            //     position: 'top',
            //     textStyle: {
            //       color: '#6c50f3',
            //   }
            // },
          data: data.valListOne.reverse()
        },
          {
            name: data.typeList[1],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 0,
            // label: {
            //   show: true,
            //   position: 'top',
            //   textStyle: {
            //     color: '#00ca95',
            //   }
            // },
            data: data.valListTwo.reverse()
          },
          {
            name: data.typeList[2],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 0,
            // label: {
            //   show: true,
            //   position: 'top',
            //   textStyle: {
            //     color: 'rgb(231,255,0)',
            //   }
            // },
            data: data.valListThree.reverse(),
          },
           {
            name: data.typeList[3],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 0,
            // label: {
            //   show: true,
            //   position: 'top',
            //   textStyle: {
            //     color: 'rgb(231,255,0)',
            //   }
            // },
            data: data.valListThree.reverse(),
          },
           {
            name: data.typeList[4],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 0,
            // label: {
            //   show: true,
            //   position: 'top',
            //   textStyle: {
            //     color: 'rgb(231,255,0)',
            //   }
            // },
            data: data.valListFour.reverse(),
          },
           {
            name: data.typeList[5],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 0,
            // label: {
            //   show: true,
            //   position: 'top',
            //   textStyle: {
            //     color: 'rgb(231,255,0)',
            //   }
            // },
            data: data.valListFive.reverse(),
          },
          {
            name: data.typeList[6],
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 0,
            // label: {
            //   show: true,
            //   position: 'top',
            //   textStyle: {
            //     color: 'rgb(231,255,0)',
            //   }
            // },
            data: data.valListSix.reverse(),
          },
        ]
      };
    },
    initLine1(){
      this.province_name1 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0,
              fontSize:20
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
            fontSize:16
          },
        },
        legend: {
          show: true,
          right: '10%',
          top: '5%',
          itemGap: 20,
          itemWidth:15,
          itemHeight:10,
          textStyle:{
            color:"#fff",
            fontSize:18
          },
          data: [
            {
              name: '火电',
              icon: 'circle',
            },
            {
              name: '水电',
              icon: 'circle',

            },
            {
              name: '新能源',
              icon: 'circle',

            },
            {
              name: '核电',
              icon: 'circle',

            },
          ],
        },
        grid: {
          top: '15%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          splitArea: {
            // show: true,
            color: '#f00',
            lineStyle: {
              color: '#f00'
            },
          },
          axisLabel: {
            color: 'rgb(0,253,255,0.6)'
          },
          splitLine: {
            show: false
          },
          boundaryGap: false,
          data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06','2021-07'],

        }],
        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisLabel: {
            show: true,
            margin: 20,
            lineStyle: {
              color: 'rgb(0,253,255,0.6)'
            }
          },
          axisTick: {
            show: true,
          },
        }],
        series: [
            {
              name: '火电',
              type: 'line',
              smooth: true, //是否平滑
              showAllSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
              lineStyle: {
                normal: {
                  color: "#6c50f3",
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#6c50f3',
              }
          },
          itemStyle: {
            color: "#6c50f3",
            borderColor: "#fff",
            borderWidth: 3,
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0,
            shadowOffsetY: 2,
            shadowOffsetX: 2,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(108,80,243,0.3)'
              },
                {
                  offset: 1,
                  color: 'rgba(108,80,243,0)'
                }
              ], false),
              shadowColor: 'rgba(108,80,243, 0.9)',
              shadowBlur: 20
            }
          },
          data: [5157.3, 5100.2, 4952.9, 4517.1, 4507.3, 4460.5, 4457.6,]
        },
          {
            name: '水电',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#00ca95',
              }
            },
            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,202,149,0.3)'
                },
                  {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                  }
                ], false),
                shadowColor: 'rgba(0,202,149, 0.9)',
                shadowBlur: 20
              }
            },
            data: [648.9, 650.3, 669.6, 776.1, 955.9, 1009.4,1153.2],
          },
          {
            name: '新能源',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
                normal: {
                  color: 'rgb(212,98,11)',
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 5,
                  shadowOffsetX: 5,
                },
              },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#00ca95',
                }
              },
            itemStyle: {
              normal: {
                color: 'rgb(212,98,11)',
                lineStyle: {
                  color: 'rgb(212,98,11)',
                  width: 1
                },
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgb(212,98,11)'
              }]),
            },
            data: [605.8, 609.3, 614.4, 613.1, 672.2, 670.3,675.8,],
         },
          {
            name: '核电',
            type: 'line',
            smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: 'circle',
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: 'rgb(231,255,0)',
              }
            },
            itemStyle: {
              color:'rgb(231,255,0)',
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0,202,149,0.3)'
                },
                  {
                    offset: 1,
                    color: 'rgba(0,202,149,0)'
                  }
                ], false),
                shadowColor: 'rgb(231,255,0)',
                shadowBlur: 20
              }
            },
            data: [340.7, 336.9, 342.1, 323.7, 342.5, 330.6,],
          },
        ]
      };
    },
    initLine2(name){
      let seriesData=[]
      this.line2Data.name.forEach((v,index )=> {
          seriesData.push({
            name:v,
            type: 'line',
            data:this.line2Data.data[v],
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color:this.line2Data.color[v],
            },
            itemStyle: {
                  normal: {
                      borderWidth: 0,
                      color: this.line2Data.color[v],
                  }
              }
          })
      });
      if(name){
        let row =seriesData.find(v=>{
          return name==v.name
        })
         console.log(row)
         seriesData=[{
            name:row.name,
            type: 'line',
            data:row.data,
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 2,
              color:row.lineStyle.color,
            },
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    color: row.itemStyle.normal.color,
                }
              }
         }]
      }
      this.province_name2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#fff',
              color: '#556677',
              borderColor: 'rgba(0,0,0,0)',
              shadowColor: 'rgba(0,0,0,0)',
              shadowOffsetY: 0,
            },
            lineStyle: {
              width: 0,
            },
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#5c6c7c',
          },
        },
        grid: {
          top: '5%',
          bottom:"8%",
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisLine: {
              lineStyle: {
                color: '#0173DA',
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#FFFFFF',
              },
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
            },
            boundaryGap: false,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#0173DA',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            max: 8,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0173DA',
              },
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#0173DA',
              },
            },
          },
          {
            type: 'value',
            position: 'right',
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#0173DA',
              },
              formatter: '{value}',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0173DA',
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: seriesData,
      };
    },
    initRadar(id){
      const indicator = [
        {
          name: '国内经济活跃度',
          max: 20,
        },
        {
          name: '国际市场',
          max:  20,
        },
        {
          name: '政策变化',
          max:20,
        },
        {
          name: '能源结构变化',
          max: 20,
        },
        {
          name: '关停信息',
          max: 20,
        },
      ];
      let seriesData=null;
      if(id){
        this.activeId=id
      }
      let row=this.rightBottomData.find(v=>{
        return v.id==this.activeId
      })
      let listData=[]
      this.activeRow=row;
      if(row){
          seriesData=[row.gn,row.gj,row.zc,row.ny,row.gt]
          listData.push({name:row.jy||"暂无建议"})
      }else{
          seriesData=[];
          listData=[]
      }
      this.listData=listData;
      var i=-1;
      var _this = this;
      this.radarOption = {
        tooltip: {
          confine: true,
          trigger: 'item',
          formatter: function(params){
            let relVal = '';
            let typeList = _this.rightBottomData
            for (let i = 0; i < params.data.value.length; i++) {
                relVal += indicator[i].name  + ' : '+ params.data.value[i] + ' '+'</br>';
                }
            return relVal;
          }
        },
        color: ['#068AC3', '#B2782C'],
        radar: {
          center: ['48%', '50%'], // 外圆的位置
          radius: '50%',
          name: {
            rich:{
              a:{
                color: '#fff',
                fontSize: 12,
                fontWeight: 300,
              },
              b:{
                  color: '#fff',
                  fontSize: 12,
                  fontWeight: 300,
                  align: 'center',
              },
            },
             formatter: (a,b)=>{
                  i++;
                  return `{a|${a}}\n{b|(${seriesData[i]})}`
              }
          },
          // TODO:
          indicator: indicator,
          splitArea: {
            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
            show: true,
            areaStyle: {
              // 分隔区域的样式设置。
              color: ['#00224A', '#00224A', '#00224A', '#00224A', '#00224A'], // 画布颜色 // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
            },
          },
          axisLine: {
            // 指向外圈文本的分隔线样式
            lineStyle: {
              color: 'rgba(255,255,255,0.2)',
            },
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: ['#1781BA', '#1781BA'], // 分隔线颜色
              width: 1, // 分隔线线宽
            },
          },
        },
        series: [
          {
            type: 'radar',
            symbolSize: 5,
            data: [
               {
                  symbol: "circle",
                  symbolSize: 5,
                  value: seriesData,
                  areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
                  itemStyle: {
                    normal: {
                      borderWidth:1,
                      color: "RGBA(0, 34, 66, 1)",
                      borderColor: "rgba(146, 225, 255, 1)"
                    }
                  },
                  lineStyle: {
                    color: "rgba(146, 225, 255, 1)",
                    width: 1
                  }
                }
            ],
          }
        ],
      }
    },
     

  },
  created() {
    // this.table1.data=this.guoji
    this.initData('1')
    this.initLine1();
    this.initLine2();
    this.initRadar();
    this.changetable(1)
  }
}
</script>
<style scoped>
.sczcohyj >>> .el-input--small .el-input__inner{
      background: #0c1779 !important; 
      color: white !important;
}
.sczcohyj >>>.el-select-dropdown{
      background: #0c1779 !important; 
      color: white !important;
}
</style>
<style lang="less">
.full-h{
  height: 100%;
}
.full-w{
  width: 100%;
}
.text-right{
  text-align: right;
}
.text-left{
  text-align: left;
}
.sczcohyj{
 
  .text-panel{
    height: 70%;
    background-size: contain !important;
   
    .buttonDiv{
      height:2vh;
      padding:0 0.6vw;
      background:url("../../public/images/Tai_di.png") no-repeat;
      background-size: 100% 100%;
      color: #23EDFF;
      text-align: center;
      float: right;
      margin-top: 0.5vh;
      line-height: 2vh;
      margin-right: 0.2vw;
      cursor:pointer;

    }
    .buttonDiv.active{
      background:url("../../public/images/Tai_dian.png") no-repeat;
      background-size: 100% 100%;

    }
    .panel-title{
      background:url("../../public/images/Tai_icon.png") no-repeat;
      background-size: initial;
      padding-left: 1.6vw;
      margin: 0.5vh 0;
      background-position-y: 0.2vh;
      .text{
        color: #1FDFFE;
        font-size: 1vw;
        padding: 0.2vh 0.2vw 0 0.5vw;
        line-height: 2vh;
      }


    }
    .panel-content{

      .mapTable{
        background: #091C68;
        color: #fff;
        th{
          border-bottom: 0;
          background: transparent;
          .cell{
            color: #fff;
          }
        }

        tr{
          background: transparent;
          td{
            border-bottom: 1px solid transparent;
            padding:0.8vh 0;
          }

        }
        tr.tableBg{
          background: #030E51;
        }
        tr:hover{
          background: url("../../public/images/Tai_tiao.png") no-repeat;
          background-size: 100% 100%;
          td{
            background:transparent;
          }
        }

      }
      .el-table::before{
        background: transparent;
      }
    }
  }

  .left_panel{
    width:calc(30vw - 2vh)!important;
    background: url("../../public/images/panel_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding: 2vh;
    box-sizing: border-box;

  }
  .mid_panel{width:40vw!important}
  .right_panel{
    width:calc(30vw - 2vh)!important;
    background: url("../../public/images/panel_bg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    background-size: 100% 100%;
    padding:2vh !important;
    padding-top:5vh !important;
    box-sizing: border-box;
    .echart-panel{
      height:calc(95%);
      padding: 0.5vh;
      background: url("../../public/images/bj1.png") no-repeat;
      background-size: 100% 100% !important;
      box-sizing: border-box;
      .panel-title{
        font-size: 0.8vw;
        line-height: 2vh;
        text-align: center;
        margin-top: 1vh;
        color: #fff;
        b{
          display: inline-block;
          width: 2vh;
          height: 2vh;
          background: url("../../public/images/zuo.png") no-repeat;
          background-size: contain;
          vertical-align: middle;
        }
        i{
          display: inline-block;
          width: 2vh;
          height: 2vh;
          background: url("../../public/images/you.png") no-repeat;
          background-size: contain;
          vertical-align: middle;
        }
      }
      .panel-content{
        height: calc(100% - 4vh);
        .listPanel{
          padding:0 0.5vw!important;
          height: 100%;
            .listRow{
              background: url("../../public/images/bj.png");
              background-size: 100% 100%;
              height: 5vh;
              line-height: 5vh;
              width: calc(100%);
              color: #fff;
              font-size: 1.2vh;
              line-height: 2vh;
              padding:  0.5vw 0 0.5vw 0.5vw;
              margin: 1vh 0;
            }
          }
      }
    }
  }
  .flyPanel{
    width: 80%;
    height: 80%;
    background: url("../../public/images/bing.png") no-repeat;
    background-size:contain;
    background-position-y: 3vh;
    margin: 0 auto;
  }
}
</style>
